<template>
    <div class="tw:flex tw:justify-center tw:-space-x-14">
        <div class="tw:bg-blue-500 tw:mix-blend-multiply tw:size-48 tw:rounded-full"></div>
        <div class="tw:bg-pink-500 tw:mix-blend-multiply tw:size-48 tw:rounded-full"></div>
    </div>
    <div class="tw:bg-blue-500">
        <div class="容器 tw:isolate">
            <div class="项目 tw:bg-yellow-500"></div>
            <div class="项目 tw:bg-green-500"></div>
        </div>
        <div class="容器">
            <div class="项目 tw:bg-yellow-500"></div>
            <div class="项目 tw:bg-green-500"></div>
        </div>
    </div>
    <div class="tw:bg-blue-500">
        <div class="容器 tw:isolate">
            <div class="项目 tw:bg-yellow-500"></div>
            <div class="项目 tw:bg-green-500"></div>
        </div>
        <div class="容器">
            <div class="项目 tw:bg-yellow-500"></div>
            <div class="项目 tw:bg-green-500"></div>
        </div>
    </div>
    <div class="tw:bg-[rebeccapurple]">
        rebeccapurple
    </div>

    <ul class="tw:list-[square]">
        <li>01</li>
        <li>02</li>
        <li>03</li>
    </ul>
</template>

<style scoped>
    @reference '@/tailwind.css';
    .容器 {
        @apply tw:flex tw:justify-center tw:-space-x-14 tw:m-4;
    }
    .项目 {
        @apply tw:size-48 tw:rounded-full tw:mix-blend-multiply;
    }
    .背景项目 {
        @apply tw:size-48 tw:rounded-full tw:bg-blend-multiply;
    }
</style>